Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
	width: 100%;
	height: 100vh;
	background: black;
}
.candle{
	position: absolute;
	width: 100px;
	height: 330px;
	background: linear-gradient(orange,darkorange,sienna,saddlebrown,rgba(0,0,0,0.4) 90%);
	bottom: 2%;
	left: 45%;
}
.candle:before{
	content: '';
	position: absolute;
}
.candle:after{
	content: '';
	position: absolute;
	top: -25px;
	height: 50px;
	width: 100%;
	border-radius: 50%;
	background: radial-gradient(sienna,orange,darkorange,saddlebrown);
	transform: rotateX(60deg);
	box-shadow: inset 3px 3px 5px rgba(0,0,0,0.2),
				inset -3px -3px 5px rgba(0,0,0,0.2);
}
.thread{
	width: 5px;
	height: 35px;
	position: absolute;
	top: -35px;
	left: 45px;
	background: linear-gradient(blue 2%,black 80%,orange 99%);
	border-radius: 50% 50% 20% 20%;
	z-index: 10;
}
.fire{
	position: absolute;
	width: 25px;
	height: 100px;
	background: linear-gradient(white 50%,orange,blue);
	border-radius: 50% 50% 30% 30%;
	box-shadow: 70px -50px 100px orangered,-70px -50px 100px orangered;
	top: -120px;
	left: 35px;
	animation: move 1s linear infinite,rotate 2s linear infinite;
}
@keyframes move{
	0%{
		transform: rotateZ(1deg);
	}
	100%{
		transform: rotateZ(-1deg);
	}
}
@keyframes rotate{
	0%{
		top: -119px;
		left: 34px;
	}
	100%{
		top: -121px;
		left: 36px;
	}
}

Frontend Forever App